<template>
  <div class="channel-edit">
    <!-- 我的频道----------------------------->
    <van-cell :border="false">
      <!-- 标题 -->
      <div slot="title" class="title-text">我的频道</div>
      <van-button
        @click="isEdit = !isEdit"
        class="edit-btn"
        type="danger"
        plain
        round
        size="mini"
      >
        {{ isEdit ? '完成' : '编辑' }}
      </van-button>
    </van-cell>
    <!-- 我的频道 - 宫格显示 频道项目 -->
    <van-grid class="my-grid" :gutter="10">
      <!-- 宫格项<van-icon name="clear" /> -->
      <van-grid-item
        :icon="getIconName(c)"
        v-for="(c, i) in usrChannList"
        :key="i"
        class="grid-item"
        :class="{ redFont: i === myIndex }"
        :text="c.name"
        @click="clickMyChan(c, i)"
      />
    </van-grid>

    <!-- 推荐频道---------------------------- -->
    <van-cell :border="false">
      <!-- 标题 -->
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
    <!-- 推荐频道 - 宫格显示 频道项目 -->
    <van-grid class="recommend-grid" :gutter="10">
      <!-- 宫格项 -->
      <van-grid-item
        v-for="(c, i) in recommandList"
        :key="c.id"
        class="grid-item"
        :text="c.name"
        icon="plus"
        @click="addChannel(c, i)"
      />
    </van-grid>
  </div>
</template>

<script>
// 导入 接口
import {
  getAllChannels,
  addChannel,
  deleteUserChannel
} from '@/api/channels.js'

// 导入 vuex 的 mapstate 映射方法
import { mapState } from 'vuex'

// 导入 配置对象
import config from '@/config/index.js'
// 导入 localStroage 操作方法
import { setItem } from '@/utils/storage.js'

export default {
  name: '',
  props: {
    // 用户频道列表
    usrChannList: {
      // usrChannList=数组的内存地址1 -> 修改地址1指向的 数组的元素【不会报错】
      type: Array,
      required: true
    },
    // 默认选中的频道下标
    myIndex: {
      // myIndex =1 -> myIndex=2【报错】
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 编辑状态
      isEdit: false,
      // 固定频道id数组
      fixedChans: [0],
      // 测试数组，不用管
      fixedChans2: [
        { id: 0, name: '推荐' },
        { id: 1, name: 'html' }
      ],
      // 推荐频道列表
      recommandList: []
    }
  },
  // 钩子函数
  async created() {
    // a.获取 全部频道 ---------------------
    const { data: res } = await getAllChannels()
    // b.筛选出 推荐频道列表（全部频道 - 我的频道 = 推荐频道）
    //   遍历 全部频道，从找筛选出 不包含在 我的频道 的频道
    this.recommandList = res.data.channels.filter(
      (e) => !this.usrChannList.some((e2) => e2.id === e.id)
    )
  },
  // 方法
  methods: {
    // 1.将 推荐频道 添加到 我的频道 中
    async addChannel(chan, index) {
      // 1.从 推荐频道 中 根据下标，删除 元素
      this.recommandList.splice(index, 1)
      // 2.将 元素 追加到 我的频道
      this.usrChannList.push(chan)

      // 3. 如果 当前有登录，则将 我的频道 保存到 服务器
      if (this.user) {
        try {
          await addChannel(chan.id, index)
        } catch (error) {
          console.log(error)
          this.$toast.fail('保存数据失败，请重试~')
        }
      } else {
        // 4. 如果 当前没有登录，则将 我的频道 保存到 本地
        setItem(config.USER_CHAN, this.usrChannList)
      }
    },
    // 2.获取 我的频道 图标名称
    // arr.inclueds 方法：直接 拿 参数 与 数组元素对比，如果有相同的 元素，则返回true
    // arr.some 方法：将数组元素依次取出，传入 回调函数中，等任意回调函数 返回true，则 some方法返回true
    getIconName(chan) {
      // 如果 处于编辑状态，且 传入频道 不在 固定频道中，则 返回 clear 图标名，否则，返回空
      return this.isEdit && !this.fixedChans.includes(chan.id) ? 'clear' : ''
      //   return this.isEdit && !this.fixedChans2.includes(chan.id) ? 'clear' : ''
      //   return this.isEdit && !this.fixedChans2.some((e) => e.id === chan.id) ? 'clear' : ''
      //   this.fixedChans.some((e) => e === chan.id)
    },
    // 3.点击我的频道
    async clickMyChan(chan, i) {
      // 3.1 如果 是编辑状态，则移出选中的 我的频道
      if (this.isEdit) {
        // 如果 频道 是 固定频道，则 不执行删除
        if (this.fixedChans.includes(chan.id)) {
          return
        }

        // 如果 被点击频道下标 小于 激活频道下标，则需要 修改父组件的频道下标
        if (i <= this.myIndex) {
          // 只需要切换 父组件频道下标，不需要关闭弹窗
          this.$emit('onChangeChannel', this.myIndex - 1)
        }
        // a.将 被点击 频道 从 我的频道 数组中移出
        this.usrChannList.splice(i, 1)
        // b.将 被点击 频道 添加到 频道推荐 数组中
        this.recommandList.push(chan)

        // 4.1 如果 有登录，则保存 用户频道数组 到 服务器
        if (this.user) {
          try {
            await deleteUserChannel(chan.id)
          } catch (error) {
            console.log(error)
            this.$toast.fail('系统繁忙，请稍后再试~')
          }
        } else {
          // 4.2 如果 没有登录，则保存 用户频道数组 到 localStorage
          setItem(config.USER_CHAN, this.usrChannList)
        }
      } else {
        // 3.2 如果 是非编辑状态，则 切换 父组件 选中频道，且关闭弹出层
        this.$emit('onChangeChannel', i, false)
      }
    }
  },
  // 计算属性
  computed: {
    ...mapState(['user'])
  },
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
.channel-edit {
  padding: 87px 0;
  .title-text {
    font-size: 32px;
    color: #333;
  }
  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  /deep/ .redFont .van-grid-item__text {
    color: red !important;
  }
  /deep/ .my-grid {
    .van-icon-clear {
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 15px;
      color: #cacaca;
      z-index: 2;
    }
  }
  /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap;
      background-color: #f3f5f7;
      .van-grid-item__text {
        font-size: 28px;
        color: #222;
        margin-top: 0px;
      }
    }
  }

  /deep/ .recommend-grid {
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
        .van-grid-item__text {
          margin-top: 0px;
        }
      }
    }
  }
}
</style>
